<template>
    <div class="box">
        <div class="thead">
            <el-input class="td" readonly :value="$t('config.form.table.name')"></el-input>
            <el-input class="td" readonly :value="$t('config.form.table.value')"></el-input>
            <el-button class="td-del" @click="add()">{{$t('opea.add')}}</el-button>
        </div>
        <el-scrollbar style="height:100%">
            <div class="tbody">
                <div class="tr" v-for="(item,k) in resParams" :key="k">
                    <el-select v-model="item.c" filterable placeholder="请选择" class="td" @change="selectChange">
                        <el-option
                        v-for="item in params"
                        :disabled="!item.show"
                        :key="item.code"
                        :label="item[$lang=='cn'?'chinese':'name']"
                        :value="item.code">
                        </el-option>
                    </el-select>
                    <!-- <el-input class="td" readonly v-model="item[$lang=='cn'?'chinese':'name']"></el-input> -->
                    <el-input class="td" v-model="item.v" @blur="check(item.v,item.c)" :readonly="!item.c"></el-input>
                    <el-button type="danger" class="td-del" @click="remove(item,k)">{{$t('opea.delete')}}</el-button>
                </div>
            </div>
        </el-scrollbar>
    </div>
</template>
<script>
export default {
    props:['parameters','handlerFn','parametersInfo'],
    data(){
        return{
            resParams:[],
            params:this.parameters,
        }
    },
    watch:{
        // dialog关闭时重新给parameters赋值 
        // 查看时循环info code 改变parameters
        parameters(n){
            this.params = n
            this.params.forEach(v=>{
                // console.log(v.code)
            })
        },
        params(n){
            this.params = n
        },
        resParams(n,o){
            if(n.c != o.c){
                this.params.forEach(v=>{
                    if(n.c == v.code){
                        v.show = fasle
                    }
                    if(o.c == v.code){
                        v.show = true
                    }
                })
            }
            this.$emit(this.handlerFn,n)
        },
        parametersInfo(n){
            if(n){
                console.log(n)
                this.resParams = n
                this.params.forEach((v,k)=>{
                    this.resParams.forEach(rv=>{
                        if(v.code == rv.c){
                            v.show = false;
                        }
                    })
                })
            }
        }
    },
    methods:{
        selectChange(item){
            let arr = []
            this.params.forEach(v=>{
                this.resParams.forEach(r=>{
                    if(v.code == r.c){
                        arr.push(r.c)
                        v.show = false
                    }
                })
            })
            this.params.forEach(p=>{
                if(arr.indexOf(p.code) > -1){
                    p.show = false
                    return
                }
                p.show = true
            })
        },
        // add(){
        //     if(this.params[0]){
        //         this.resParams.push({c:this.params[0].code,v:this.params[0].param_value,[this.$lang=='cn'?'chinese':'name']:this.params[0][this.$lang=='cn'?'chinese':'name']})
        //         this.params.splice(0,1)
        //     }else{
        //         this.$message.error('无可用参数')
        //     }
        // },
        add(){
            if(this.params[0]){
                this.resParams.push({})
                console.log(this.resParams)
            }else{
                this.$message.error('无可用参数')
            }
        },
        // remove(row){
        //     console.log(row)
        //     this.resParams.forEach((v,k)=>{
        //         if(v.c == row.c){
        //             this.resParams.splice(k,1)
        //             this.params.unshift({code:v.c,param_value:v.v,[this.$lang=='cn'?'chinese':'name']:v[this.$lang=='cn'?'chinese':'name']})
        //         }
        //     })
        // }
        remove(row,k){
            let obj = row;
            // 判断对象是否为空
            if(Object.keys(obj).length == 0){
                this.resParams.splice(k,1)
                return
            }
            this.resParams.forEach((v,k)=>{
                if(v.c && v.c == row.c){
                    this.resParams.splice(k,1)
                    this.params.forEach(item=>{
                        if(item.code == v.c){
                            item.show = true
                        }
                    })
                    return
                }
            })
        },
        check(value,code){
            if(code){
                if(!value){
                    this.$message('请输入值')
                    return        
                }
                let max,min;
                if(code == 6||code == 8 || (code >= 16 && code <= 33) || (code >= 39 && code <=47)){
                    if(/^0x/.test(value)){
                        max = value >> 16 & 0xffff;
                        min = value & 0xffff;
                    }else if(/^\d+\,\d+$/.test(value)){
                        max = value.substring(0,value.indexOf(','));
                        min = value.substring(value.indexOf(',')+1)
                    }else if(/^\d+$/.test(value)){
                        value = '0x'+parseInt(value,10).toString(16)
                        max = value >> 16 & 0xffff;
                        min = value & 0xffff;
                    }else{
                        if(max > 4095){
                            this.$message('最大值为4095')
                            return
                        }
                        if(min < 0){
                            this.$message('最小值为0')
                            return
                        }
                        if(min > max){
                            this.$message('最大值必须大于最小值')
                            return
                        }
                        this.$message('请输入正确的值')
                        return
                    }
                }
            }
            if(!value){
                this.$message('请先选择配置名称')
            }
            console.log(value)
        }
    }
}
</script>

<style>
.box .el-input__inner{
    border-radius: 0;
}
.box .el-form-item{
    width: 98%;
}
</style>

<style scoped>
.box{
    width: 100%;
    height: 200px;
}
.thead{
    overflow: hidden;
    width:98%;
}
.tbody{
    width: 98%;
}
.tbody .tr{
    overflow: hidden;
}
.td{
    float: left;
    width: 44%;
}
.td-del{
    float: right;
}
</style>

